<template>
  <section>
    <!-- 工具条 -->
    <Toolbar
      :keyworldPlaceholder="'请输入租户名称'"
      :getData="getData"
      :add="showDialogForm"
      :multiConditionQuery="true"
      :selectionRows="selectionRows"
    />

    <!-- 数据表 -->
    <Table
      ref="tenantTable"
      :data="tenants"
      :columns="columns"
      :hasDropdownOperator="true"
      :dropdownClick="handleEdit"
      :dropdownCommand="onCommand"
      :deleteClick="onDelete"
      @selectionRows="onSelectionRows"
      :dropdownItems="[
        {
          command: 'setPermission',
          text: '设置权限',
        },
      ]"
    >
    </Table>

    <!-- 分页 -->
    <el-row class="footerToolbar">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageResult.pageSize"
        :total="pageResult.totalCount"
      ></el-pagination>
    </el-row>

    <!-- 新增/编辑 -->
    <popup-window
      ref="popupWindow"
      :isShow.sync="dialogFormVisible"
      :title="title"
      :labelWidth="labelWidth"
      :formData="formData"
      :submit="submit"
    >
      <!-- <template v-slot:name="item">
        <p>{{ item.item }}</p>
      </template> -->
    </popup-window>

    <!-- 设置权限 -->
    <grant-permission
      title="设置权限"
      :visible.sync="hasSetPermission"
      :tenantId="tenantId"
    >
    </grant-permission>
  </section>
</template>

<script>
import {
  getTenantsByPage,
  addTenant,
  editTenant,
  deleteTenant,
} from "@/api/tenant";

import GrantPermission from "@/components/GrantPermission";
import PopupWindow from "@/components/PopupWindow";
import Table from "@/components/Table";
import Toolbar from "@/components/Toolbar";
export default {
  components: {
    GrantPermission,
    PopupWindow,
    Table,
    Toolbar,
  },
  data() {
    return {
      searchKey: {},
      //table
      tenants: [],
      columns: [
        { label: "租户名", prop: "name" },
        { label: "邮箱(账号)", prop: "email" },
        { label: "手机号", prop: "phoneNumber" },
        {
          label: "状态",
          prop: "enabled",
          render: (row) => {
            const type = row.enabled == 1 ? "success" : "danger";
            const text = row.enabled == 1 ? "正常" : "禁用";
            return `<span class="tag tag-${type}">${text}</span>`;
          },
        },
        { label: "备注", prop: "remark" },
        {
          label: "创建时间",
          prop: "createdTime",
          hasFormatDate: true,
          formatter: "yyyy-MM-dd hh:mm:ss",
        },
      ],
      pageResult: {},
      pageIndex: 1,
      pageSize: 20,
      selectionRows: [], //选中行信息
      //set permis
      hasSetPermission: false,
      //form
      tenantId: null,
      dialogFormVisible: false,
      labelWidth: "90px",
      formData: [],
      title: "新增租户",
    };
  },
  mounted() {
    this.getTenants();
    this.formData = this.InitFormData();
  },
  methods: {
    getData(param) {
      this.searchKey = param;
      this.getTenants();
    },
    getTenants() {
      const data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        ...this.searchKey,
      };
      this.$refs.tenantTable.loading = true;
      getTenantsByPage(data).then((data) => {
        this.$refs.tenantTable.loading = false;
        const { items, totalCount, pageIndex, pageCount, pageSize } = data;
        this.tenants = items;
        this.pageResult = { totalCount, pageIndex, pageCount, pageSize };
      });
    },
    InitFormData() {
      return [
        {
          label: "租户Id",
          prop: "tenantId",
          value: 0,
          hide: true,
        },
        {
          label: "租户名称",
          prop: "name",
          value: "",
          inputType: "text",
          rules: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        },
        {
          label: "邮箱(账号)",
          prop: "email",
          value: "",
          inputType: "text",
          rules: [{ required: true, message: "邮箱", trigger: "blur" }],
        },
        {
          label: "手机号",
          prop: "phoneNumber",
          value: "",
          inputType: "text",
          rules: [{ required: true, message: "手机号", trigger: "blur" }],
        },
        {
          label: "状态",
          prop: "enabled",
          inputType: "select",
          selectItems: [
            { label: "启用", value: true },
            { label: "禁用", value: false },
          ],
          value: true,
          rules: [{ required: true, message: "请选择状态", trigger: "blur" }],
        },
        {
          label: "备注",
          prop: "remark",
          value: "",
          inputType: "textarea",
        },
      ];
    },
    showDialogForm() {
      this.formData = this.InitFormData();
      this.dialogFormVisible = true;
    },
    submit(data) {
      const { tenantId } = data;
      if (!tenantId) {
        addTenant(data, () => {
          this.$refs.popupWindow.hideLoading();
        }).then(() => {
          this.dialogFormVisible = false;
          this.getTenants();
        });
      } else {
        editTenant(data, () => {
          this.$refs.popupWindow.hideLoading();
        }).then(() => {
          this.dialogFormVisible = false;
          this.getTenants();
        });
      }
    },
    onCommand(command, row) {
      console.log(command);
      if (command == "setPermission") {
        this.hasSetPermission = true;
        this.tenantId = row.tenantId;
      }
    },
    onSelectionRows(rows) {
      this.selectionRows = rows;
    },
    onDelete(index, row) {
      const { tenantId } = row;
      this.$confirm("确认删除该条记录吗？", "提示", {}).then(() => {
        deleteTenant({ tenantId: tenantId }, (data) => {
          this.getTenants();
        });
      });
    },
    handleAdd() {
      this.formData = this.InitFormData();
      this.title = "新增租户";
      this.dialogFormVisible = true;
    },
    handleEdit(row) {
      this.title = "修改租户";
      this.dialogFormVisible = true;
      this.formData.forEach((el) => {
        el.value = row[el.prop];
      });
    },
    handleDelete(index, row) {
      const { tenantId } = row;
      this.$confirm("确认删除该条记录吗？", "提示", {}).then(() => {
        deleteTenant({ tenantId: tenantId }).then(() => {
          this.getTenants();
        });
      });
    },
  },
};
</script>
<style scoped>
</style>
